<template>
	<view class="route-addcoupon">
		<view class="form">
			<u--form labelWidth="85" :labelStyle="{fontSize:'14px',color:'#2E2D2D'}" labelAlign="right"
				labelPosition="left" :model="formValues" ref="formRef">
				<u-form-item label="类型:" prop="a">
					<u-radio-group :labelSize="28" v-model="formValues.a" placement="row">
						<u-radio name="1" activeColor="#ED2920" label="折扣"></u-radio>
						<u-radio name="2" activeColor="#ED2920" label="满减"></u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="名称:" prop="b">
					<u--input type="text" v-model="formValues.b" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="描述:" prop="c">
					<u--textarea height="100" v-model="formValues.c" placeholder="请输入"></u--textarea>
				</u-form-item>
				<u-form-item label="满多少使用:" prop="d">
					<u--input type="number" v-model="formValues.d" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="减多少元:" prop="e">
					<u--input type="number" v-model="formValues.e" border="none" placeholder="或者几折"></u--input>
				</u-form-item>

				<u-form-item label="截止日期:" prop="g" @click="handleShowTime">
					<!-- <u--input disabledColor="#ffffff" v-model="formValues.g" border="none" placeholder="请选择"></u--input> -->
					<view class="place" v-if="!formValues.g">
						请选择
					</view>
					<view class="valuefo" v-else>
						{{formValues.g}}
					</view>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>


				<u-form-item label="每人限领取:" prop="f">
					<u--input type="number" v-model="formValues.f" border="none" placeholder="0不限制"></u--input>
				</u-form-item>

			</u--form>
		</view>
		<view class="">
			<u-datetime-picker :closeOnClickOverlay="true" :show="showTime" v-model="time" mode="datetime"
				:minDate="minData" @cancel="handleCloseTime" @confirm="handleConfirmTime"></u-datetime-picker>

		</view>

		<view class="footer">
			<view class="btn" @click="handleSubmit">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const {
		proxy
	} = getCurrentInstance();
	const time = ref()
	const minData = ref(0)
	const showTime = ref(false)
	const formValues = reactive({
		a: '1',
		b: '',
		c: '',
		d: '',
		e: '',
		f: '',
		g: ''
	})

	onReady(() => {
		const rules = {
			a: [{
				type: 'string',
				required: true,
				message: '请填写姓名',
				trigger: ['blur', 'change']

			}],
			b: [{
				type: 'string',
				required: true,
				message: '请输优惠券名称',
			}],
			c: [{
				type: 'string',
				required: true,
				message: '请输入优惠券描述',
			}],
			d: [{
				type: 'string',
				required: true,
				message: '请输入满多少元使用',
			}],
			e: [{
				type: 'string',
				required: true,
				message: '请输入减多少元或几折',
			}],
			g: [{
				type: 'string',
				required: true,
				message: '请选择截止日期',
			}],
			f: [{
				type: 'string',
				required: true,
				message: '请输入每人限领取几张',
			}]


		}
		proxy.$refs.formRef.setRules(rules)
	})
	const handleShowTime = () => {
		let timeStamp = dayjs().valueOf();
		minData.value = timeStamp
		showTime.value = true

	}
	const handleCloseTime = () => {
		showTime.value = false
	}
	const handleConfirmTime = () => {
		let timestr = dayjs(time.value).format("YYYY-MM-DD HH:mm:ss")
		formValues.g = timestr
		showTime.value = false
	}

	const handleSubmit = () => {
		proxy.$refs.formRef.validate().then(res => {
			console.log(res)
		}).catch(errors => {
			console.log(errors)
			errorList.value = [...errors]
		})
	}
</script>

<style lang="scss" scoped>
	.route-addcoupon {
		padding: 40rpx 24rpx 170rpx 24rpx;

		.form {

			border-radius: 10rpx;
			background-color: #fff;
			padding: 12rpx 24rpx 12rpx 12rpx;

			::v-deep .u-form-item__body {
				align-items: flex-start;
			}

			::v-deep.u-form-item__body__left__content__label {
				line-height: 26px;
			}

			::v-deep .u-radio {
				padding-right: 10px;
			}

			::v-deep .u-form-item__body__right {
				padding-left: 10px;
			}

			// ::v-deep .u-textarea__field {
			// 	height: 200rpx !important;
			// }
			.place {
				color: #c0c4cc;
				font-size: 15px;
				line-height: 24px;
			}

			.valuefo {
				font-size: 15px;
				line-height: 24px;
				color: rgb(48, 49, 51);
			}
		}

		.footer {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding-left: 24rpx;
			padding-right: 24rpx;
			padding-top: 11rpx;
			height: 130rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ED2920;
				color: #fff;
				padding: 19rpx 0;
				border-radius: 40rpx;
			}
		}
	}
</style>